
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>

<style>
    a{
        text-decoration: none;
        color: #666;
    }
    a:hover{
        color: #f60;
    }
    li{
        list-style: none;
    }
    div,ul,li{
        margin: 0;
        padding: 0;
    }
    #menu{
        font: normal 14px/30px "Simsun";
        overflow: hidden;
        height: 30px;
        width: 90px;
        border: 1px solid #d2d2d2;
        margin: 20px auto;
    }
    #menu a {
        padding: 0 20px 0 10px;
    }
    #menu:hover{
        height: auto;
        overflow: visible;
    }
    #menu .inner{
        position: relative;
    }
    #menu .inner:after{
        content: ">";
        position: absolute;
        margin-left: .2em;
        -webkit-transition: transform ease .5s;
        -o-transition: transform ease .5s;
        transition: transform ease .5s;

        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    #menu:hover .inner:after{
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    #menu li {
        position: relative;
        overflow: hidden;
    }
    #menu li:hover {
        overflow: visible;
    }
    #menu li > .more {
        position: absolute;
        left: 90px;
        top: 0;
        width: 90px;
        text-indent: 10px;
        border: 1px solid #d2d2d2;
    }
    #menu li > .more:before {
        content: '>';
        position: absolute;
        left: -30px;
        top: 0;
    }
    #menu li:hover > .more:before {
        content: '<';
    }
</style>
</head>
<body>
    
    <div id="menu">
        <a href="#" class="inner">顶级菜单</a>
        <ul class="more">
            <li>
                <a href="#">菜单一</a>
                <ul class="more">
                    <li><a href="#">菜单一</a></li>
                    <li><a href="#">菜单二</a>
                        <ul class="more">
                            <li><a href="#">菜单二</a></li>
                            <li><a href="#">菜单三</a></li>
                            <li><a href="#">菜单四</a>
                                <ul class="more">
                                    <li><a href="#">菜单三</a></li>
                                    <li><a href="#">菜单四</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">菜单三</a></li>
                    <li><a href="#">菜单四</a></li>
                </ul>
            </li>
            <li><a href="#">菜单二</a></li>
            <li><a href="#">菜单三</a></li>
            <li><a href="#">菜单四</a></li>
        </ul>
    </div>

</body>
</html>